<template>
  <div>
    <el-card class="m-20">
      <template #header>
        <el-button type="primary" @click="addtmForm">添加</el-button>
      </template>
      <el-table stripe style="width: 100%" :data="tmData" border>
        <el-table-column prop="index" label="序号" width="80" align="center">
          <template slot-scope="scop">
            {{ scop.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="tmName" label="品牌名称" align="center"></el-table-column>
        <el-table-column label="品牌logo">
          <template #default="{ row }">
            <img :src="row.logoUrl" style="width:80px;height:80px">
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row, $index }">
            <el-button type="warning" @click="handleEdit(row, $index)" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" @click="handlDelete(row, $index)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹窗 -->
      <el-dialog :title="tmForm.id ? '修改品牌' : '添加品牌'" :visible.sync="dialogVisible" top="0px">
        <el-form style="width:500px" ref="ruleFormRef" :model="tmForm" label-width="100px">
          <el-form-item label="品牌名称" prop="tmName">
            <el-input v-model="tmForm.tmName"></el-input>
          </el-form-item>
          <el-form-item label="品牌LOGO" prop="logoUrl">
            <!-- 上传图片 -->
            <el-upload class="avatar-uploader" action="/dev-api/admin/product/fileUpload" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <template #tip>
                <div class="el-upload__tip">
                  图片必须是JPG格式且不能大于2MB.
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
          </span>
        </template>
      </el-dialog>


      <!-- 分页器 -->
      <el-pagination class="ml-20" :current-page.sync="Page" :page-size="limit"
        layout="prev, pager, next, jumper,->,sizes,total" :page-sizes="[5, 10, 20, 30]" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" style="padding:20px 0" :total="total">
      </el-pagination>
    </el-card>


  </div>
</template>
  
<script>
import TrademarkApi from '@/api/trademark'
import { cloneDeep } from 'lodash'
export default {
  name: 'Trademark',
  data() {
    return {
      page: 1,
      limit: 5,
      tmData: [],
      Page: 1,//当前页码
      total: 100,//总条数
      limit: 5,// 每页记录数
      dialogVisible: false,//弹窗显示
      tmForm: { tmName: '', logoUrl: '' },//收集表单的数据
      uploadAction: ``
    }
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val
      this.getPage()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getPage()
    },
    async getPage() {
      let res = await TrademarkApi.getPage(this.page, this.limit)
      this.tmData = res.data.records
      this.total = res.data.total
    },
    //图片上传成功的回调
    handleAvatarSuccess(response, uploadFile) {
      this.tmForm.logoUrl = response.data
    },
    //图片上传的回调 上传之前的回调,要进行拦截,不符合要求的图片拦截住简单校验
    beforeAvatarUpload(rawFile) {
      if (rawFile.type !== 'image/jpeg') {
        this.$message({
          message: '上传成功',
          type: 'success'

        })
        this.$message.error('图片必须是jpg格式')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        this.$message.error('图片大小不能超过2MB!')
        return false
      }
      return true
    },
    //编辑
    handleEdit(row) {

      this.tmForm = cloneDeep(row)
      this.dialogVisible = true
    },
    //添加
    addtmForm() {
      this.dialogVisible = true
    },
    //弹窗取消
    cancel() {
      this.tmForm.tmName = '',
        this.tmForm.logoUrl = '',
        this.dialogVisible = false
    },
    //保存
    async save() {
      if (this.tmForm.id) {
        console.log(11111111);
        await TrademarkApi.update(this.tmForm)
      } else {
        console.log(222222);
        await TrademarkApi.save(this.tmForm)
      }
      this.$message({
        message: '保存成功',
        type: 'success'
      })
      this.cancel()
      this.getPage()
    },
    //删除
   handlDelete(row) {
      this.$confirm(`确定永久删除【${row.tmName}】该文件吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        await TrademarkApi.delete(row.id)
        this.getPage()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }

  },
  mounted() {
    this.getPage()
  }
}

</script>
  
<style  scoped>

</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>